<template>
  <div>
    <!-- 车辆入库 -->
    <div class="contatine">
      <!-- 车辆列表 -->
      <el-row :gutter="15" class="head">
        <el-form
          ref="elForm"
          :model="queryParams"
          size="mini"
          label-width="100px"
          label-position="left"
        >
          <el-col :span="24">
            <el-row :gutter="15">
              <el-col :span="6">
                <el-form-item label="仓库" prop="company">
                  <el-select v-model="queryParams.wId" placeholder="请选择仓库" clearable>
                    <el-option
                      v-for="(item, i) in depotList"
                      :key="i"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" :offset="2">
                <el-form-item label="手机号码" prop="phone">
                  <el-input
                    v-model="queryParams.phone"
                    type="number"
                    placeholder="请输入手机号码"
                    clearable
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6" :offset="2">
                <el-form-item label="车辆状态" prop="pStatus">
                  <el-select v-model="queryParams.pStatus" placeholder="请选择车辆状态" clearable>
                    <el-option
                      v-for="(item, i) in pStatusList"
                      :key="i"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="6">
                <el-form-item label="办案人员" prop="phName" clearable>
                  <el-input
                    v-model="queryParams.phName"
                    placeholder="请输入办案人员名称"
                    @keyup.enter.native="handleQuery"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6" :offset="2">
                <el-form-item label="车辆名称" prop="pName">
                  <el-input
                    v-model="queryParams.pName"
                    placeholder="请输入车辆名称"
                    clearable
                    @keyup.enter.native="handleQuery"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6" :offset="2">
                <el-form-item label="仓库人员" prop="manager">
                  <el-input
                    v-model="queryParams.manager"
                    placeholder="请输入仓库人员"
                    clearable
                    @keyup.enter.native="handleQuery"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="6">
                <el-form-item label="登记时间" prop="time">
                  <el-date-picker
                    style="width: 45%; margin-right: 10%"
                    clearable
                    v-model="queryParams.pCreateTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="开始时间"
                  >
                  </el-date-picker>
                  <el-date-picker
                    style="width: 45%"
                    clearable
                    v-model="queryParams.pEndTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="结束时间"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="2" :offset="12">
                <el-form-item size="large">
                  <el-button type="primary" @click="handleQuery">搜索</el-button>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item size="large">
                  <el-button class="da" type="primary" @click="resetQuery">重置</el-button>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="3" :offset="1" v-if="register">
            <el-form-item size="large">
              <el-button class="regist" type="primary" @click="registerDispose">{{
                buttonName
              }}</el-button>
            </el-form-item>
          </el-col> -->
            </el-row>
          </el-col>
        </el-form>
      </el-row>
    </div>

    <!-- 显示列表 -->
    <div class="main">
      <el-table v-loading="tableLoading" :data="tableData" style="width: 100%">
        <!-- 序号 -->
        <el-table-column label="序号" width="50" type="index"> </el-table-column>
        <!-- 物品编号 -->
        <el-table-column label="物品编号" width="200" prop="pSerialNum"> </el-table-column>

        <!-- 物品名称 -->
        <el-table-column label="物品名称" width="100" prop="pName"> </el-table-column>

        <!-- 物品类型 -->
        <el-table-column label="物品类型" width="100" prop="type">
          <template slot-scope="{ row }">
            {{ propertyTypeReplace(row.type) }}
          </template>
        </el-table-column>

        <!-- 数量 -->
        <el-table-column label="数量" width="50" prop="count"> </el-table-column>

        <!-- 物品图片 -->
        <el-table-column label="物品图片" width="150" align="center" prop="imgUrl">
          <template slot-scope="scope">
            <image-preview :src="scope.row.imgUrl || ''" :width="50" :height="50"></image-preview>
          </template>
        </el-table-column>

        <!-- 办案人员 -->
        <el-table-column label="办案人员" width="140" prop="phName"> </el-table-column>

        <!-- 仓库 -->
        <el-table-column label="仓库" prop="wName" width="150"></el-table-column>

        <!-- 仓库人员 -->
        <el-table-column label="仓库人员" width="90" prop="manager"> </el-table-column>

        <el-table-column label="日期" width="150">
          <span slot-scope="scope">
            {{ dateFormat('YYYY-mm-dd HH:MM', scope.row.registryTime) }}
          </span>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="update(scope.$index, tableData)">
              修改
            </el-button>
            <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
            <el-button size="mini" type="primary" @click="particulars(scope.row)"> 详情 </el-button>
            <el-button size="mini" type="primary" @click="openFinancing(scope.row)">
              入库
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="footer">
      <div class="block">
        <pagination
          v-show="total"
          :total="total"
          :limit.sync="pageSize"
          :page.sync="pageNum"
          @pagination="pagination"
        >
        </pagination>
      </div>
    </div>

    <!-- 修改 -->
    <el-dialog title="修改" :visible.sync="dialogFormVisible" :show-close="false">
      <el-form :data="searchList" class="demo-form-inline">
        <el-row :gutter="100">
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="物品编号">
                <el-input v-model="searchList.pSerialNum" disabled></el-input>
              </el-form-item>

              <el-form-item label="物品名称">
                <el-input v-model="searchList.pName"></el-input>
              </el-form-item>

              <el-form-item label="物品类型">
                <el-select v-model="searchList.type" placeholder="选择">
                  <el-option
                    v-for="dict in dict.type.financial_property_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="数量">
                <el-input v-model="searchList.count"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="14"
            ><div class="grid-content bg-purple">
              <el-form-item label="">
                <span>物品图片</span>
                <image-upload v-model="searchList.imgUrl" />
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="" />
                </el-dialog>
              </el-form-item>
            </div>
          </el-col>
        </el-row>

        <el-form-item label="登记时间" prop="registryTime">
          <el-date-picker
            clearable
            v-model="searchList.registryTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择登记时间"
            disabled
          >
          </el-date-picker>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 详情 -->
    <el-dialog title="详情" :visible.sync="dialogTableVisible">
      <el-form :data="searchList" class="demo-form-inline">
        <el-row :gutter="100">
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="物品编号">
                <el-input v-model="searchList.pSerialNum" disabled></el-input>
              </el-form-item>

              <el-form-item label="物品名称">
                <el-input v-model="searchList.pName" disabled></el-input>
              </el-form-item>

              <el-form-item label="物品类型">
                <el-select v-model="searchList.type" placeholder="选择" disabled>
                  <el-option
                    v-for="dict in dict.type.financial_property_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="数量">
                <el-input v-model="searchList.count" disabled></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="14"
            ><div class="grid-content bg-purple">
              <el-form-item label="物品图片">
                <image-preview
                  :src="searchList.imgUrl || ''"
                  :width="200"
                  :height="200"
                ></image-preview>
              </el-form-item>
            </div>
          </el-col>
        </el-row>

        <el-form-item label="登记时间" prop="registryTime">
          <el-date-picker
            clearable
            v-model="searchList.registryTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择登记时间"
            disabled
          >
          </el-date-picker>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 入库 dialogVi-->
    <el-dialog title="财物入库" :visible.sync="dialogVi" :show-close="false">
      <el-form :data="searchList" class="demo-form-inline">
        <el-row :gutter="100">
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="物品编号">
                <el-input v-model="searchList.pSerialNum"></el-input>
              </el-form-item>

              <el-form-item label="物品名称">
                <el-input v-model="searchList.pName"></el-input>
              </el-form-item>

              <el-form-item label="物品类型">
                <el-select v-model="searchList.type" placeholder="选择">
                  <el-option
                    v-for="(item, i) in pTypeList"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="数量">
                <el-input v-model="searchList.count"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="14"
            ><div class="grid-content bg-purple">
              <el-form-item label="">
                <span>物品图片</span>
                <image-upload v-model="searchList.imgUrl" />
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="" />
                </el-dialog>
              </el-form-item>
              <el-form-item label="">
                <span>入库图片</span>
                <image-upload v-model="searchList.storeImg" />
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="" />
                </el-dialog>
              </el-form-item>
            </div>
          </el-col>
        </el-row>

        <el-form-item label="登记时间" prop="registryTime">
          <el-date-picker
            clearable
            v-model="searchList.registryTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择登记时间"
            disabled
          >
          </el-date-picker>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitBtn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { propertyTypeReplace } from '@/utils/characterConversion.js' // 车辆接口
import { getCpkList, updataFac, addFac } from '@/api/system/carparks.js'
import request from '@/utils/request.js'

export default {
  dicts: ['financial_property_type'],

  data() {
    return {
      // 仓库列表
      depotList: [],
      // 状态列表
      pStatusList: [
        {
          value: 0,
          label: '没有任何操作'
        },
        {
          value: 1,
          label: '退还'
        },
        {
          value: 2,
          label: '移交'
        },
        {
          value: 3,
          label: '销毁'
        }
      ],
      // 物品类型
      typeList: [
        {
          value: 1,
          label: '普通物品'
        },
        {
          value: 2,
          label: '特殊物品'
        },
        {
          value: 3,
          label: '车辆'
        }
      ],
      // 查询参数
      queryParams: {
        wId: null,
        phone: null,
        pStatus: null,
        phName: null,
        type: null,
        pName: null,
        pCreateTime: null,
        pEndTime: null,
        manager: null
      },
      // 渲染图片
      dialogImageUrl: '',
      // 入库模态框状态
      dialogVi: false,
      // 加载效果
      tableLoading: true,

      // 总页数
      pageNum: 1,
      // 每页显示多少条数据
      pageSize: 10,
      // 数据总条数
      total: 100,

      // 物品列表数据
      tableData: [],
      // 模态框数据的列表
      searchList: [],
      // 出库
      dialogVisible: false,
      // 详情
      dialogTableVisible: false,
      // 修改
      dialogFormVisible: false,

      // // 财物状态
      pTypeList: [
        {
          label: '1-普通物品',
          value: 1
        },
        {
          label: '2-特殊物品',
          value: 2
        },
        {
          label: '3-车辆',
          value: 3
        }
      ]
    }
  },
  created() {
    // 获取仓库列表数据并处理
    request({
      url: '/system/warehouse/list',
      method: 'get'
    }).then((e) => {
      e.rows.forEach((i) => {
        this.depotList.push({ label: i.name, value: i.id })
      })
    })
    this.handleQuery()
  },
  methods: {
    // 页码发生变化后触发
    pagination(e) {
      // 调用 formdata 组件的方法
      this.pageNum = e.page
      this.pageSize = e.limit
      this.$nextTick(() => {
        this.handleQuery()
      })
    },
    // 重置
    resetQuery() {
      for (const key in this.queryParams) {
        this.queryParams[key] = null
      }
      this.handleQuery()
    },
    // 数据渲染和搜索
    handleQuery() {
      getCpkList({ ...this.queryParams, registryStatus: '1', type: '3' }).then((data) => {
        this.tableLoading = false
        this.tableData = data.rows
        this.total = data.total
        console.log(data)
      })
    },
    // 财务入库模态框
    openFinancing(row) {
      this.dialogVi = true
      this.searchList = row
    },
    // 删除
    del(data) {
      this.$modal.confirm('确认信息').then(function () {
        delFac({ pId: data.pId, qrId: data.qrId }).then((res) => {
          this.$modal.msgSuccess('删除成功')
        })
      })
    },
    // 注册过滤财务类型的显示文字
    propertyTypeReplace,
    // 详情
    particulars(row) {
      this.dialogTableVisible = true
      this.searchList = row
    },

    // 修改
    update(index) {
      this.title = '修改'
      this.dialogFormVisible = true
      this.searchList = this.tableData[index]
    },

    // 修改提交
    submitBtn: function () {
      this.$modal
        .confirm('是否确认入库该数据项?')
        .then(() => {
          if (this.searchList == '') {
            return this.$message.error('请先选择一条要入库的信息')
          } else {
            updataFac(this.searchList).then((res) => {})
            console.log(this.searchList)
            addFac(this.searchList).then((res) => {
              this.handleQuery()
              this.$modal.msgSuccess('提交成功')
              this.dialogVi = false
            })
          }
        })
        .catch(() => {})
    },

    // 修改
    submitForm: function () {
      this.$modal
        .confirm('是否确认修改该数据项?')
        .then(() => {
          updataFac(this.searchList).then((res) => {
            this.$modal.msgSuccess('修改成功')
            this.handleQuery()
            this.dialogFormVisible = false
            console.log(this.dialogFormVisible)
          })
        })
        .catch(() => {})
    },

    // 取消
    cancel: function () {
      this.searchList = []
      this.handleQuery()
      this.dialogFormVisible = false
      this.dialogVi = false
      this.dialogTableVisible = false
    },

    // 上传组件的图片格式
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },

    // 日期格式化
    dateFormat(fmt, date) {
      let ret = ''
      date = new Date(date)
      const opt = {
        'Y+': date.getFullYear().toString(), // 年
        'm+': (date.getMonth() + 1).toString(), // 月
        'd+': date.getDate().toString(), // 日
        'H+': date.getHours().toString(), // 时
        'M+': date.getMinutes().toString(), // 分
        'S+': date.getSeconds().toString() // 秒
        // 有其他格式化字符需求可以继续添加,必须转化成字符串
      }
      for (let k in opt) {
        ret = new RegExp('(' + k + ')').exec(fmt)
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
          )
        }
      }
      return fmt
    }
  }
}
</script>
<style scoped lang="scss">
.app-container {
  padding: 15px;
}
el-input {
  width: 100px;
  height: 26px;
}

.contatine {
  width: 98%;
  margin: 10px;
  /* background: #f6f3f3; */
  padding: 10px 5px;
}

.top {
  border: 0.5px solid darkgray;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.list_top li {
  list-style: none;
  float: left;
  /* margin-right: 10px; */
  /* padding: 5px 10px 5px  10px; */
  padding: 10px 10px;
  /* border: 1px solid black; */
  top: 50px;
}

/* 财务登记 */

.grid-content {
  border-radius: 4px;
  min-height: 10px;
}

.main,
.footer {
  width: 98%;
  margin: 10px;
  /* background: #f6f3f3; */
  height: 100%;
  padding: 10px 10px 10px 10px;
}

.operation {
  margin-bottom: 5px;
}

/* 表格 */
.grid {
  text-align: center;
}
</style>
